const cellTemplate = function(n) {
    let o = {
        0: 'zero',
        1: 'one',
        2: 'two',
        3: 'three',
        4: 'four',
        5: 'five',
    }
    let t = `<div class="cell ${o[n]}"></div>`
    return t
}
const lineTemplate = function(arr) {
    let cells = ''
    for (let i = 0; i < arr.length; i++) {
        cells += cellTemplate(arr[i])
    }
    let line = `<div class="line clearfix">${cells}</div>`
    return line
}
const mapTemplate = function(arr, id = 'id-div-map') {
    let lines = ''
    for (let i = 0; i < arr.length; i++) {
        lines += lineTemplate(arr[i])
    }
    let map = `
        <div id=${id}>
            ${lines}
        </div>
    `
    return map
}
const confirmTemplate = function() {

}

const panelTemplate = function(arr, score, lineNumber) {
    let nextBlockMap = mapTemplate(arr, 'id-div-next-block-map')
    let panelHtml = `
        <div id="id-div-panel">
            <div id="id-div-score-container">
                <div>分数</div>
                <div id="id-div-score">${score}</div>
            </div>
            <div id="id-div-lines-container">
                <div>行数</div>
                <div id="id-div-lines">${lineNumber}</div>
            </div>
           <div id="id-div-level-container">
                <div>级别</div>
                <div id="id-div-level">${lineNumber}</div>
            </div>
            <div id="id-div-next-block-container">
                ${nextBlockMap}
            </div>
            <div id="id-div-restart" class="button">重新开始</div>
            <div id="id-div-toggle">
                <div id="id-div-pause" class="button show">暂停游戏</div>
                <div id="id-div-play" class="button">返回游戏</div>
            </div>
            <div class="button guides" >操作指南</div>
            <div id="id-div-operations">
                <div class="operation"><span class="key">a，←</span>左移</div>
                <div class="operation"><span class="key">d，→</span>右移</div>
                <div class="operation"><span class="key">s，↓</span>加速下落</div>
                <div class="operation"><span class="key">w，↑</span>旋转</div>
                <div class="operation"><span class="key">space</span>到底</div>
            </div>
            <div id="id-div-gameover">GAME OVER</div>
        </div>
    `
    return panelHtml
}
